layui.use(['jquery', 'layer'], function () {
    var $ = layui.jquery, layer = layui.layer;

    $(function () {
        var $banner = $('.banner');
        var $banner_ul = $('.banner-img');
        var $btn = $('.banner-btn');
        var $btn_a = $btn.find('a')
        var v_width = $banner.width();
        var page = 1;
        var timer = null;
        var time = 3000;
        var btnClass = null;
        var page_img = $banner_ul.find('li img');
        var page_count = $banner_ul.find('li').length;
        var load = $banner.find('.banner-load');
        $banner_ul.width(page_count * v_width);

        function move(obj, classname) {
            if (!$banner_ul.is(':animated')) {
                loading_start();
                if (classname == 'prevBtn') {
                    if (page == 1) {
                        $banner_ul.animate({
                            left: -v_width * (page_count - 1)
                        });
                        page = page_count;
                        cirMove();
                    } else {
                        $banner_ul.animate({
                            left: '+=' + v_width
                        }, "slow");
                        page--;
                        cirMove();
                    }
                } else {
                    if (page == page_count) {
                        $banner_ul.animate({
                            left: 0
                        });
                        page = 1;
                        cirMove();
                    } else {
                        $banner_ul.animate({
                            left: '-=' + v_width
                        }, "slow");
                        page++;
                        cirMove();
                    }
                }
            }
        }

        (function loading_reset() {
            load.css({
                "height": "3px",
                "position": "absolute",
                "left": "0",
                "bottom": "0",
                "background": "#FF4939",
                "z-index": "10"
            });
            loading_start();
        })();

        function loading_start() {
            load.animate({
                "width": "100%"
            }, time).animate({
                "width": 0
            }, 0);
        }

        function loading_stop() {
            load.stop(true, true).animate({
                "width": 0
            }, 0)
        }

        function cirMove() {
            $('.banner-nav li').eq(page - 1).addClass('selected').siblings().removeClass('selected');
        }

        $banner.mouseover(function () {
            $btn.css({
                'display': 'block'
            });
            clearInterval(timer);
            loading_stop();
        }).mouseout(function () {
            $btn.css({
                'display': 'none'
            });
            loading_start();
            clearInterval(timer);
            timer = setInterval(move, time);
        }).trigger("mouseout");
        $btn_a.mouseover(function () {
            $(this).animate({
                opacity: 1
            }, 'fast');
            $btn.css({
                'display': 'block'
            });
            return false;
        }).mouseleave(function () {
            $(this).animate({
                opacity: 0.3
            }, 'fast');
            $btn.css({
                'display': 'none'
            });
            return false;
        }).click(function () {
            btnClass = this.className;
            loading_stop();
            clearInterval(timer);
            timer = setInterval(move, time);
            move($(this), this.className);
        });
        $('.banner-nav li').on('click', function () {
            var index = $('.banner-nav li').index(this);
            $banner_ul.animate({
                left: -v_width * index
            }, 'slow');
            page = index + 1;
            cirMove();
        });
    });

});